<template>
    <div class="top">
        <div class="choose">
            <span>
                用户名ID: <input type="text"   class="search_child" placeholder="请输入描述内容关键字" v-model="messagePage.uid"></span>
            <span>
                  文章ID:  <input type="text" class="search_child" placeholder="请输入描述内容关键字" v-model="messagePage.wid"></span>
            <span>
                  时间:  <input type="date" class="search_child" placeholder="请输入描述内容关键字" v-model="messagePage.dateTime"></span>
            <span  class="search_click" @click="search_">搜索</span>
            <button class="del_click" @click="delAll"
                    :class="{'disable':messageDel.length<=1}"
                    :disabled="messageDel.length<=1">批量删除</button>
        </div>



    </div>
    <div class="bottom">
        <table cellpadding="0" cellspacing="0" >
            <thead>
            <tr>
                <th style="width: 10px" ><input type="checkbox" :checked="allId" @input="delComments($event)"></th>
                <th>序号</th>
                <th>时间</th>
                <th>用户名</th>
                <th>文章标题</th>
                <th>内容</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(item,index) in fuzzyQueries"  v-if="fuzzyQueries.length>0 ">
                <td><input type="checkbox" :checked="individually"  @input="addDelComments($event,item.id,index)"></td>
                <td style="width: 60px">{{ total.current > 1 ? (index+1)+14*(total.current-1) : index+1}}</td>
                <td style="width: 200px">{{item.dateTime}}</td>
                <td >{{item.username}}</td>
                <td style="width: 200px"  class="overflow">{{item.title}}</td>
                <td class="overflow">{{item.content}}</td>
                <td style="width: 80px">
                    <span :class="{'button_style':true,'but_normal':item.statue ,'but_disable':!item.statue}"  >{{ item.statue==1 ? "正常" :"禁用" }}</span>
                </td>
                <td style="width: 150px">
                    <span class="edit but_warn" @click="detail(item.content)" >详情</span>
                    <span class="edit but_mistake" @click="edit_userInfo(item,index)">删除</span>
                </td>
            </tr>
            <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                <LoadTheAnimation ></LoadTheAnimation>
            </tr>
            <tr v-else>
                <td></td>
                <td></td>
                <td></td>
                <td><h2>未查询到任何数据</h2></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>

    </div>
    <div class="bottom_">
        <span style="margin-right:10px">共{{ total.page }}页, 共{{ total.sum }}条数据 当前第{{ total.current }}页</span>
        <span class="jian" @click="left_"><img src="../../../public/static/jian_r.png" alt=""></span>
        <input type="text" class="limit" v-model="total.current" @focusout="limit_">
        <span class="jian" @click="right_"><img src="../../../public/static/jian_l.png" alt=""></span>
        <select @change ="page_($event)" class="page_index">
            <option  v-for="(item,index) in 3" >{{(index+1)*10+3}}/条</option>
        </select>
    </div>
    <PromptWindow v-show="box_confirm" @confirm="confirm" :info="info" :index="index"></PromptWindow>
    <DetailsWindow @down="down" v-show="box" :info="info"></DetailsWindow>
</template>

<script>
import api from "@/api";
import DetailsWindow from "@/components/publicCommon/DetailsWindow.vue";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";

export default {
    name: "Comments",
    components: {LoadTheAnimation, PromptWindow, DetailsWindow},
    data() {
        return {
            select: false,
            searchValue: "",
            fuzzyQueries: [],
            messagePage: {
                index: 1,
                page: 13,
                uid:null,
                wid:null,
                dateTime:null,
            },
            messageDel: [],
            allId:false,
            individually:false,
            total: {
                sum: '',
                page: '',
                size: '',
                current: '',
            },
            box:false,
            info:"",
            box_confirm:false,
            index:"",
            del_info:false,
            load_:true,
            delAll_:false,
        }

    },
    mounted() {
        this.request_(this.messagePage);
    },
    watch: {
        'messagePage.dateTime'(newValue,oldValue){
               this.messagePage.dateTime= newValue == "" ? null : newValue;
               this.request_(this.messagePage);
        },
        'messagePage.uid'(newValue,oldValue){
            this.messagePage.uid= newValue == "" ? null : newValue;},
        'messagePage.wid'(newValue,oldValue){
            this.messagePage.wid= newValue == "" ? null : newValue;},
        del_info(newValue,oldValue){
            if(newValue){
                if(this.delAll_){
                    api.delAllComments(this.messageDel).then((res) => {
                        if (res.data.code === 200) {
                            this.request_(this.messagePage);
                            this.$store.commit("requestInfo", "批量删除评论成功!");
                            this.$forceUpdate();
                        } else {
                            this.$store.commit("requestInfo", "批量删除评论失败!");
                        }
                        this.delAll_ = false;
                        this.info = "";
                        this.del_info = false;
                    })
                    for(let i in this.messageDel){
                        this.fuzzyQueries.splice(i, 1);
                    }
                    this.messageDel=[];
                }else {
                    api.delComments(this.info.id).then((res) => {
                        if (res.data.code === 200) {
                            this.$store.commit("requestInfo", "删除评论成功!");
                            this.$forceUpdate();
                        } else {
                            this.$store.commit("requestInfo", "删除评论失败!");
                        }
                        this.info = "";
                        this.del_info = false;
                    })
                    this.fuzzyQueries.splice(this.index, 1);
                }
            }
        },
        'total.current'(newVal, oldVal) {
            let reg = /^\+?[1-9]\d*$/;
            if(reg.test(newVal)){
                this.messagePage.index = newVal;
            }
            if(newVal > this.total.page){
                this.messagePage.index = 1;
            }
        },
        searchValue(newValue, oldValue) {
            if (newValue === "") {
                this.messagePage.condition = null;
                this.request_(this.messagePage);
            }

        },
    },
    methods: {
        delComments(event){
            this.messageDel=[];
            if(event.target.checked){
                for(let item in this.fuzzyQueries){
                    this.messageDel.push(item.id)
                }
                this.allId = true
                this.individually = true;
            }else{
                this.individually = false;
                this.allId = false
            }
        },
        addDelComments(item,id){
            if(item.target.checked){
                this.messageDel.push(id)
            }else {
                this.messageDel = this.messageDel.filter(del => del !== id);
            }
             this.allId = (this.messageDel.length === this.fuzzyQueries.length)
        },
        detail(item){
            this.info = item;
            this.box = true;
        },
        down(){
            this.info = "";
            this.box = false;
        },
        confirm(index,bool){
            this.box_confirm = false;
            if(bool){
                this.del_info  = true;
            }
        },
        highlight_(text) {
            text = text + "";
            if (this.searchValue !== "")
                return text.replace(this.searchValue, '<span style="background: #f6f604;">' + this.searchValue + '</span>')
            else return text
        },
        delAll(){
            this.delAll_ = true;
            this.box_confirm = true;
        },
        edit_userInfo(info, index) {
            this.info = info;
            this.index = index;
            this.box_confirm = true;
        },
        search_() {
            this.request_(this.messagePage);
        },

        condition_(type) {
            this.messagePage.index = 1;
            this.messagePage.types = type;
            this.request_(this.messagePage);
        },
        limit_() {
            this.request_(this.messagePage);
        },
        request_(messagePage) {
            api.selectComments(messagePage).then((res) => {
                setTimeout(()=>{this.load_ = false;},1000)
                this.fuzzyQueries = res.data.data[0] ? res.data.data[0]:[];
                this.total.sum = res.data.data[1].total;
                this.total.page = res.data.data[1].pages;
                this.total.current = res.data.data[1].current;
                this.total.size = res.data.data[1].size;
            })
        },
        page_(event){
            this.messagePage.page = parseInt(event.target.value);
        },
        left_() {
            this.messagePage.index -= 1;
            if (this.messagePage.index < 1) {
                this.messagePage.index = 1;
                this.$store.commit("requestInfo","当前已是第一页");
                return;
            }
            this.request_(this.messagePage);
        },
        right_() {
            this.messagePage.index += 1;
            if (this.messagePage.index > this.total.page) {
                this.messagePage.index = this.total.page;
                this.$store.commit("requestInfo","已是最后一页");
                return;
            }
            this.request_(this.messagePage);
        }
    }
}
</script>

<style scoped>

tr {
    animation: tr_ .3s ease-in-out 0s 1 forwards;
}
@keyframes tr_ {
    0%{
        transform: scaleY(0%);
    }100%{
         transform: scaleY(100%);
     }
}
tr:nth-child(2n) {
    background: rgba(206, 202, 202, 0.5);
}

.search_child{
     height: 30px;
     padding:0 10px;
     outline:none;
}
.choose{
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.choose span{
    margin-right: 10px;
}
.search_click{
    display: inline-block;
    background: #057cf8;
    padding: 4px 7px;
    color: white;
    cursor: pointer;
    border: 0;
}
.search_click:hover{
    opacity: .8;
}
.page_index{
    height: 26px;
    outline: none;
    padding: 0 7px;
    color: #4297ec;
    border: 1px solid #282828;
}
option{
    padding: 10px;
}
.del_click{
    display: inline-block;
    padding: 4px 7px;
    color: white;
    cursor: pointer;
    background: #f66161;
    border: 0;
}
.disable{
    cursor: not-allowed;
    opacity: .5;
}
</style>